Skip to content

Feature/#9 버튼 컴포넌트 구현#10

Merged
Lseojeong merged 8 commits intodevelopfrom
feature/#9
Nov 3, 2025
Merged

Feature/#9 버튼 컴포넌트 구현#10
Lseojeong merged 8 commits intodevelopfrom
feature/#9

Conversation

@Lseojeong
Copy link
Copy Markdown
Contributor

#️⃣연관된 이슈

📝작업 내용

공통적으로 사용하는 버튼 컴포넌트 구현

📷preview

@Lseojeong Lseojeong self-assigned this Nov 3, 2025
@Lseojeong Lseojeong linked an issue Nov 3, 2025 that may be closed by this pull request
1 task
@gemini-code-assist
Copy link
Copy Markdown

Summary of Changes

Hello @Lseojeong, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 재사용 가능한 Button 컴포넌트를 도입하여 UI 개발의 기반을 마련합니다. 이와 함께 Storybook 환경을 개선하고, SVG 파일 처리 방식을 표준화하며, 전역 CSS 스타일링을 리팩토링하여 일관된 디자인 시스템을 구축하는 데 중점을 둡니다. 또한, Vitest 테스트 환경을 제거하고 Chromatic을 통합하여 시각적 테스트 워크플로우를 간소화합니다.

Highlights

  • 버튼 컴포넌트 구현: 다양한 스타일과 크기를 지원하는 재사용 가능한 Button 컴포넌트가 src/components/Button 디렉토리에 추가되었습니다.
  • Storybook 설정 업데이트: Storybook에 SVG 로더(@svgr/webpack)가 추가되었고, 전역 CSS(globals.css)가 Storybook에 포함되도록 설정되었습니다. 또한, 불필요한 애드온(@storybook/addon-docs, @storybook/addon-vitest) 및 관련 설정 파일이 제거되었습니다.
  • 전역 CSS 리팩토링: src/app/globals.css 파일이 src/styles/globals.css로 이동되었으며, CSS 변수명(--font-size-* -> --text-size-*, --radius-* -> --rounded-*) 및 일부 색상 값이 업데이트되었습니다. 또한, 커스텀 텍스트 크기 유틸리티 클래스가 추가되었습니다.
  • SVG 처리 방식 개선: Next.js 및 Storybook 설정에서 SVG 파일을 컴포넌트로 가져올 수 있도록 @svgr/webpack을 활용하는 방식으로 SVG 처리 로직이 간소화되었습니다.
  • Vitest 통합 제거: 프로젝트에서 Vitest 테스트 프레임워크와 관련된 설정 파일 및 의존성이 완전히 제거되었습니다.
  • Chromatic 통합: Storybook의 시각적 회귀 테스트 도구인 Chromatic이 package.json에 추가되고 관련 스크립트가 정의되었습니다.
Ignored Files
  • Ignored by pattern: .github/workflows/** (1)
    • .github/workflows/chromatic.yml
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.


버튼 하나, 클릭의 시작, 다양한 모습, 기능은 하나. 코드 속에서, 새 생명 얻어, 사용자 손길, 기다리네. UI의 작은 영웅.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

이 PR은 공통 버튼 컴포넌트를 구현하고 관련 Storybook 설정을 추가하는 것을 목표로 합니다. 전반적으로 컴포넌트 구조와 스타일 상수는 잘 구성되었습니다. 그러나 package.json에 민감한 토큰이 하드코딩된 심각한 보안 문제가 발견되었습니다. 또한, 버튼 컴포넌트의 재사용성과 유지보수성을 높이기 위한 몇 가지 개선점을 제안합니다.

Comment thread package.json Outdated
additionalClasses: string
): string => {
const sizeClasses = getSizeClasses(variant, size);
return `${BUTTON_BASE_STYLES} ${BUTTON_VARIANTS[variant]} ${sizeClasses} ${additionalClasses}`;
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

여러 클래스 문자열을 공백으로 연결하고 있습니다. additionalClasses가 비어있을 때 클래스 목록 끝에 불필요한 공백이 생길 수 있습니다. clsxclassnames와 같은 유틸리티를 사용하면 더 좋지만, 간단하게는 filter(Boolean).join(' ')을 사용하여 빈 문자열을 제거하고 불필요한 공백 문제를 해결할 수 있습니다.

Suggested change
return `${BUTTON_BASE_STYLES} ${BUTTON_VARIANTS[variant]} ${sizeClasses} ${additionalClasses}`;
return [BUTTON_BASE_STYLES, BUTTON_VARIANTS[variant], sizeClasses, additionalClasses].filter(Boolean).join(' ');

disabled={disabled || isLoading}
{...props}
>
{isLoading ? '로딩 중...' : children}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

isLoading 상태일 때 "로딩 중..."이라는 한글 문자열이 하드코딩되어 있습니다. 이는 컴포넌트의 재사용성을 낮추고 국제화(i18n)에 불리합니다. 로딩 상태의 컨텐츠를 prop으로 받거나, 텍스트 대신 스피너와 같은 시각적 요소를 사용하는 것을 고려해보세요.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Nov 3, 2025

스토리북 URL 확인하기 - https://6908bd6605f813993a4103e1-xxjwatakjx.chromatic.com/

@Lseojeong Lseojeong changed the title Feature/#9 Feature/#9 버튼 컴포넌트 구현 Nov 3, 2025
@Lseojeong Lseojeong merged commit 0c1ac3a into develop Nov 3, 2025
3 checks passed
@Lseojeong Lseojeong deleted the feature/#9 branch November 16, 2025 03:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] 버튼 컴포넌트 구현

1 participant